<template>
  <div class="tab-bar-item" :class="highlight" @click="handleClick">
    <i :class="iconStyle"></i>
    <slot></slot>
  </div>
</template>

<script setup>
import { computed, inject, getCurrentInstance } from 'vue'
// const {parent,index} = useParent('TabBar')
const props = defineProps({
    icon:{
        type:String,
        required:true,
    }
})
const iconStyle = computed(()=>{
    return `iconfont icon-${props.icon}`
})

const tabBar = inject('tabBar')

const instance = getCurrentInstance()
tabBar.children.push(instance)
console.log(tabBar)

const index = tabBar.children.indexOf(instance)
const highlight = computed(() => {
  return tabBar.model.value === index ? 'highlight' : ''
})

const handleClick = () => {
  tabBar.setActive(index)
}


</script>

<style scoped>
/* 导入iconfont字体库 */
@import 'http://at.alicdn.com/t/c/font_5027211_xpt8cs8p0aq.css';
.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 12px;
  color: white;
}
.tab-bar-item i {
  font-size: 18px;
}
.highlight{
    color:#f11;
}
</style>